<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @tap="goBack">
          <text class="iconfont">&#xe697;</text>
        </view>
        <view class="title">
          <image class="avatar" :src="productData.storeAvatar" mode="aspectFill" />
          <text>{{ productData.storeName }}</text>
        </view>
      </view>
      <view class="header-right">
        <button class="follow-btn" @tap="handleFollow">+关注</button>
        <view class="share-btn">
          <text class="iconfont">&#xe6eb;</text>
        </view>
      </view>
    </view>

    <!-- Image Carousel -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" circular>
      <swiper-item v-for="(item, index) in productData.images" :key="index">
        <image :src="item" mode="aspectFill" class="swiper-image" />
      </swiper-item>
    </swiper>

    <!-- Product Info -->
    <view class="product-info">
      <text class="product-title">{{ productData.title }}</text>
      <text class="product-desc">{{ productData.description }}</text>
      <view class="tags">
        <text v-for="(tag, index) in productData.tags" :key="index" class="tag"># {{ tag }}</text>
      </view>
    </view>

    <!-- Product Card -->
    <view class="product-card">
      <view class="card-left">
        <image :src="productData.storeAvatar" mode="aspectFill" class="store-avatar" />
        <view class="card-info">
          <text class="store-name">{{ productData.storeName }}</text>
          <view class="rating">
            <text>{{ productData.ratingCount }}人已评价</text>
          </view>
        </view>
      </view>
      <button class="add-cart-btn">加购</button>
    </view>

    <!-- Comments -->
    <view class="comments">
      <view class="comments-header">
        <text class="comments-title">评论 {{ productData.comments.length }}</text>
      </view>
      <view class="comment-list">
        <view v-for="(comment, index) in productData.comments" :key="index" class="comment-item">
          <image :src="comment.avatar" mode="aspectFill" class="comment-avatar" />
          <view class="comment-content">
            <view class="comment-user">
              <text class="username">{{ comment.username }}</text>
              <text v-if="comment.vip" class="vip-tag">{{ comment.vip }}</text>
            </view>
            <text class="comment-text">{{ comment.content }}</text>
            <view class="comment-meta">
              <text class="comment-time">{{ comment.time }} 来自{{ comment.location }}</text>
              <text class="reply-btn">回复</text>
            </view>
            <view class="like-btn" @tap="handleLike(index)">
              <text class="like-count">{{ comment.likes }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Bottom Bar -->
    <view class="bottom-bar">
      <view class="stat-item">
        <text class="iconfont">&#xe688;</text>
        <text>{{ productData.likes }}</text>
      </view>
      <view class="stat-item">
        <text class="iconfont">&#xe6cc;</text>
        <text>{{ productData.stars }}</text>
      </view>
      <view class="stat-item">
        <text class="iconfont">&#xe6bc;</text>
        <text>{{ productData.comments.length }}</text>
      </view>
      <view class="comment-input">
        <input type="text" placeholder="展开说说吧..." />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const productData = ref({
  storeAvatar:
    'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/e34c5002ae40ac750c412d1af6be119.jpg-ISqVuiJVFR5vzz14ZQhnFYiSwt9JNE.jpeg',
  storeName: 'AYSTUDIO 高端原创',
  images: [
    'https://img0.baidu.com/it/u=2457847952,2144480905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200',
    'https://img0.baidu.com/it/u=2457847952,2144480905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200',
    'https://img0.baidu.com/it/u=2457847952,2144480905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200',
  ],
  title: '比基尼四件套性感纯欲小系绳温泉泳衣',
  description: '世界总有期限，浪漫即兴发生，总有一件最合适的，落在你的身上',
  tags: ['必买清单', '泳衣穿搭', '时尚', '运动', '更出片的海岛度假泳衣'],
  ratingCount: 8,
  likes: 5227,
  stars: 2878,
  comments: [
    {
      avatar: '/placeholder.svg?height=40&width=40',
      username: '天天谈一谈天',
      vip: '88VIP',
      content: '这娘们行啊',
      time: '1-05',
      location: '天津',
      likes: 5,
    },
    {
      avatar: '/placeholder.svg?height=40&width=40',
      username: '有毒的运动',
      content: '什么穿搭',
      time: '1-06',
      location: '贵州',
      likes: 0,
    },
    {
      avatar: '/placeholder.svg?height=40&width=40',
      username: '保持微笑 L9',
      content: '洗干净等我',
      time: '昨天 03:36',
      location: '四川',
      likes: 0,
    },
  ],
})

const goBack = () => {
  uni.navigateBack()
}

const handleFollow = () => {
  uni.showToast({
    title: '关注成功',
    icon: 'success',
  })
}

const handleLike = (index) => {
  productData.value.comments[index].likes++
}
</script>

<style>
.container {
  padding-bottom: 100rpx;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.95);
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  padding: 20rpx;
}

.title {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.header-right {
  display: flex;
  align-items: center;
}

.follow-btn {
  background: #ff6034;
  color: white;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.swiper {
  height: 750rpx;
  margin-top: 88rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.product-info {
  padding: 30rpx;
}

.product-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.product-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag {
  color: #406599;
  font-size: 28rpx;
}

.product-card {
  margin: 30rpx;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-left {
  display: flex;
  align-items: center;
}

.store-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.add-cart-btn {
  background: #ff6034;
  color: white;
  padding: 10rpx 40rpx;
  border-radius: 30rpx;
}

.comments {
  padding: 30rpx;
}

.comment-item {
  display: flex;
  margin-bottom: 40rpx;
}

.comment-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.comment-content {
  flex: 1;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.vip-tag {
  background: #333;
  color: white;
  font-size: 24rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  margin-left: 10rpx;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: white;
  border-top: 1rpx solid #eee;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.comment-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.comment-input input {
  font-size: 28rpx;
}
</style>
